<template>
  <div>{{errorMsg}}</div>
  <el-menu>
    <el-sub-menu class="el-sub-menu" v-for="(menu,index) in menuList" :index="index">
      <template #title>
        <span>{{ menu.title }}</span>
      </template>
      <template v-for="(child) in menu.children">
        <el-menu-item>
          <router-link :to="child.path">
            {{ child.title }}
          </router-link>
        </el-menu-item>
      </template>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import {ref, reactive,onMounted, toRefs} from "vue";
import http from '@/axios/http';
import qs from "qs";
import {useUserStore} from "@/store/userStore.js";
import router from "@/util/router.js";

let errorMsg = reactive("");
const menuList = ref([]);

const props = defineProps({
  roleid:Number
})


onMounted(() => {
  init();
});

function init(){
  let userStore = useUserStore();
  const param = reactive({
    roleid: userStore.getUserrole
  });
  //查询菜单
  http.post('/lyy/getmenus', qs.stringify(param)).then((res) => {
    let resultmenu = res.data;

    if (resultmenu.result === "success") {
      menuList.value = resultmenu.data;

      if (menuList === null) {
        errorMsg = "获取菜单失败！";
      }
    } else {
      console.log(resultmenu.error)
      errorMsg = "获取菜单失败！";
      // router.push({path: '/login'});
    }
  })
}


</script>

<style scoped>
.el-menu {
  background-color: rgba(255, 255, 255, 0.5); /* 半透明白色背景 */
  border-right: 1px solid rgba(234, 234, 234, 0.5); /* 半透明边框 */
  width: 180px;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.el-sub-menu__title {
  padding: 10px 20px;
  color: #333333;
  font-weight: bold;
  border-bottom: 1px solid rgba(240, 242, 245, 0.5); /* 半透明边框 */
}

.el-menu-item {
  padding: 8px 20px;
  color: #606266;
  border-bottom: 1px solid rgba(240, 242, 245, 0.5); /* 半透明边框 */
}

.el-menu-item:hover {
  background-color: rgba(240, 242, 245, 0.8); /* 悬停时的透明背景 */
  color: #409eff;
}

.el-menu-item a {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
  height: 100%;
}


</style>